@extends('layouts.sell')
@section('title', '买入')
@section('content')
<style>
    .default-posi{
        width: 3.75rem;
        height: 100%;
        background: rgba(0,0,0,.6);
        position: fixed;
        z-index: 100;
        display: none;
        left: 0;
        top: 0;
    }
    .alert-d{
        width: 1.5rem;
        height: .74rem;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #FFFFFF;
        padding:.03rem .10rem;
        border-radius: .05rem;
    }
    .alert-d p:nth-of-type(1){
        font-size: .12rem;
        line-height: .24rem;
        text-align: left;
        color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cancel-alert{
        width: .12rem;
        height: .12rem;
        background: url("../images/quxiao2x.png") 0 0 no-repeat;
        background-size: .12rem;
    }
    .content-text{
        color: #333333;
        font-size: .12rem;
        line-height: .30rem;
        height: .50rem;
        box-sizing: border-box;
        border-top: 1px solid #999;
    }
    .alert-d p:nth-of-type(3){
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
<div class="container">
    <!--顶部返回按钮-->
    <div class="back-previous-page clear">
        <div class="back-button left">
            <img src="{{ config('app.url') }}/sale/images/back.png" alt="">
        </div>
        <div class="back-title left">
            <span>买入</span>
        </div>
    </div>
    <div class="default-kong"></div>
    <!--购买数据-->
    <div class="user-buy-data">
        <ul>
            <li>
                <p>
                    <span class="user user-buy">用户名</span>
                    <span class="user-data user-data-buy"></span>
                </p>
            </li>
            <li>
                <p>
                    <span>剩余数量</span>
                    <span class="shengyu-data shengyu-data-buy"></span>
                </p>
            </li>
            <li>
                <p>
                    <span>买入价格</span>
                    <span class="buy-price buy-price-buy"></span>
                </p>
            </li>
            <li>
                <p>
                    <span>买入数量</span>
                    <span class="add-or-reduce">
                        <a href="javascript:void(0)" class="reduce-data reduce-data-buy"></a>
                        <input class="buy-number buy-number-buy" value="0">
                        <a href="javascript:void(0)" class="add-data add-data-buy"></a>
                    </span>
                </p>
            </li>
            <li>
                <p>
                    <span>总计支出</span>
                    <span class="computed-pay">
                        <span class="pay-data pay-data-buy"></span>
                        <span class="pay-unit">元</span>
                    </span>
                </p>
            </li>
            <li>
                <p class="pay-style-change">
                    <span>支付方式</span>
                    <span class="pay-style">
                        <span>余额</span>
                        <span class="span-right-bg"></span>
                    </span>
                </p>
            </li>
        </ul>
    </div>
    <!--提示信息-->
    <div class="prompt-msg">
        <p class="p-title">提示信息</p>
        <p class="prompt">
            <span class="prompt-num">1.</span>
            <span class="prompt-content">挂卖信息直到目标卖出数量卖完为止。</span>
        </p>
        <p class="prompt">
            <span class="prompt-num">2.</span>
            <span class="prompt-content">发布后若无交易记录可撤单，若已进行交易直到目标卖出数量销完为止，中途不可撤单。</span>
        </p>
        <p class="prompt">
            <span class="prompt-num">3.</span>
            <span class="prompt-content">每笔交易都会经过系统处理，请谨慎下单，下单完成后可在交易记录查看交易情况。</span>
        </p>
        <p class="need-buy-p">
            <!--点击此处按钮进行api调用-->
            <a class="need-buy need-buy-buy" href="javascript:void(0)">我要买入</a>
        </p>
    </div>
</div>
<div class="posi-block">

    <div class="change-pay">
        <ul>
            <li>
                <span class="circle-change circle1"></span>
                <span class="yu-e">余额</span>
            </li>
            <li>
                <span class="circle-change circle2"></span>
                <span class="yu-e">微信</span>
            </li>
        </ul>
    </div>
    <div class="input-pass">
        <p>支付密码</p>
        <ul>
            <li><div><img src="{{ config('app.url') }}/sale/images/block-dian.png" alt=""></div></li>
            <li><div><img src="{{ config('app.url') }}/sale/images/block-dian.png" alt=""></div></li>
            <li><div><img src="{{ config('app.url') }}/sale/images/block-dian.png" alt=""></div></li>
            <li><div><img src="{{ config('app.url') }}/sale/images/block-dian.png" alt=""></div></li>
            <li><div><img src="{{ config('app.url') }}/sale/images/block-dian.png" alt=""></div></li>
            <li><div><img src="{{ config('app.url') }}/sale/images/block-dian.png" alt=""></div></li>
        </ul>
       <input type="number" class="password" id="password" autocomplete="off">
        <div class="pay-cancel">
            <span>确认</span>
            <span>取消</span>
        </div>
    </div>
</div>
<div class="default-posi">
    <div class="alert-d">
        <p>
            <span>信息</span>
            <span class="cancel-alert"></span>
        </p>
        <p class="content-text"></p>

    </div>
</div>
@endsection
